﻿@{
    Func<dynamic, dynamic> Zone = x => Display(x); // Zone as an alias for Display to help make it obvious when we're displaying zones

    Model.Id = "layout-wrapper";
    var tag = Tag(Model, "div"); // using Tag so the layout div gets the classes, id and other attributes added to the Model
       
    Model.Metadata.Wrappers.Clear();
}

@tag.StartElement
@if (Model.Header != null)
{
    <header id="layout-header" class="group">
        <div id="header">
            @Zone(Model.Header)
        </div>
    </header>
}
    @if (Model.Featured != null)
    {
        <div id="layout-featured" class="group">
            @Zone(Model.Featured)
        </div>
    }
    @if (Model.BeforeMain != null)
    {
        <div id="layout-before-main" class="group">
            @Zone(Model.BeforeMain)
        </div>
    }
<div id="layout-main-container" style="padding-top:100px"
     >
        <div id="layout-main" class="group">
            @if (Model.AsideFirst != null)
            {
                <aside id="aside-first" class="aside-first group">
                    @Zone(Model.AsideFirst)
                </aside>
            }
            <div id="layout-content" class="group">
                @if (Model.Messages != null)
                {
                    <div id="messages">
                        @Zone(Model.Messages)
                    </div>
                }
                @if (Model.BeforeContent != null)
                {
                    <div id="before-content">
                        @Zone(Model.BeforeContent)
                    </div>
                }
                @* the model content for the page is in the Content zone @ the default position (nothing, zero, zilch) *@
                @if (Model.Content != null)
                {
                    <div id="content" class="group">
                        @Zone(Model.Content)
                    </div>
                }
                @if (Model.AfterContent != null)
                {
                    <div id="after-content">
                        @Zone(Model.AfterContent)
                    </div>
                }
            </div>
            @if (Model.AsideSecond != null)
            {
                <aside id="aside-second" class="aside-second">
                    @Zone(Model.AsideSecond)
                </aside>
            }
        </div>
    </div>
    @if (Model.AfterMain != null)
    {
        <div id="layout-after-main" class="group">
            @Zone(Model.AfterMain)
        </div>
    }
    @if (Model.TripelFirst != null || Model.TripelSecond != null || Model.TripelThird != null)
    {
        <div id="layout-tripel-container">
            <div id="layout-tripel" class="group">
                @* as in beer *@
                @if (Model.TripelFirst != null)
                {
                    <div id="tripel-first">
                        @Zone(Model.TripelFirst)
                    </div>
                }
                @if (Model.TripelSecond != null)
                {
                    <div id="tripel-second">
                        @Zone(Model.TripelSecond)
                    </div>
                }
                @if (Model.TripelThird != null)
                {
                    <div id="tripel-third">
                        @Zone(Model.TripelThird)
                    </div>
                }
            </div>
        </div>
    }

@tag.EndElement

@if (Model.Footer != null || Model.FooterQuadFirst != null || Model.FooterQuadSecond != null || Model.FooterQuadThird != null || Model.FooterQuadFourth != null)
{
    <div id="layout-footer" class="group">
        <hr />
        <footer id="footer">
            @if (Model.FooterQuadFirst != null || Model.FooterQuadSecond != null || Model.FooterQuadThird != null || Model.FooterQuadFourth != null)
            {
                <div id="footer-quad" class="group">
                    @if (Model.FooterQuadFirst != null)
                    {
                        <div id="footer-quad-first">
                            @Zone(Model.FooterQuadFirst)
                        </div>
                    }
                    @if (Model.FooterQuadSecond != null)
                    {
                        <div id="footer-quad-second">
                            @Zone(Model.FooterQuadSecond)
                        </div>
                    }
                    @if (Model.FooterQuadThird != null)
                    {
                        <div id="footer-quad-third">
                            @Zone(Model.FooterQuadThird)
                        </div>
                    }
                    @if (Model.FooterQuadFourth != null)
                    {
                        <div id="footer-quad-fourth">
                            @Zone(Model.FooterQuadFourth)
                        </div>
                    }
                </div>
            }
            @if (Model.Footer != null)
            {
                <div id="footer-sig" class="group">
                    @Zone(Model.Footer)
                </div>
            }
        </footer>
    </div>
}
<div id="toTop">
    <h1><i class="fa fa-chevron-up"></i></h1>
</div>

@Display.FootScripts()
